<template>
  <div class="bg">
  <div class="rightTop">
    <div class="title">
      <div>
        <span>个人面板</span>
        <img v-if="state.isLogin" @click="state.isLogin=false" style="cursor: pointer; margin-left: 10px; width: 16px;height: 13px;" src="@/assets/img/changeIcon.png" >
      </div>
      <img v-if="state.isLogin" @click="state.isLogin=false" style="cursor: pointer; margin-right: 24px; width: 18px;height: 20px;" src="@/assets/img/logOutIcon.png" >
    </div>
    <div class="panel">
      <div class="loginPanel" v-if="!state.isLogin">
        <div class="inputArr">
          <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" status-icon>
            <el-form-item prop="username">
              <el-input v-model="dataForm.username" placeholder="请输入用户名" autocomplete="new-password">
                <template #prefix class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                </template >
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="请输入密码" autocomplete="new-password">
                <template #prefix class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-password"></use></svg>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button style="width: 228px;" type="primary" @click="dataFormSubmitHandle()">登录</el-button>
      </div>
    </div>
  </div>
  <div class="loginSucPanel" v-if="state.isLogin">
    <div class="img">
      <img  :src="state.userInfo.avatar" alt="" v-if="state.userInfo.avatar">
      <svg v-else class="icon-svg" aria-hidden="true" style="width: 100px;height: 100px">
        <use xlink:href="#icon-userImg"></use>
      </svg>
    </div>
    <div class="type1 ma-bo50">
      <div class="itemArr">
        <div class="item">
          <div class="itemNum">{{state.userInfo.nickname}}</div>
        </div>
        <div class="item">
          <div class="itemNum">{{state.userInfo.de_name}}</div>
        </div>
        <div class="item">
          <div class="itemNum">
            <el-input
              class="noEdit"
              v-model="state.userInfo.salary_name"
              show-password
              type="password"
            >
            </el-input>
          </div>
        </div>
      </div>
    </div>

    <div class="type1" v-if="type == 1">
      <div class="itemArr">
        <div class="item" @click="toUrl(1)">
          <span class="itemName">余额</span>
          <div class="itemNum">{{state.userInfo.money || '0.00'}}</div>
        </div>
        <div class="item" @click="toUrl(2)">
          <span class="itemName">积分</span>
          <div class="itemNum">{{state.userInfo.integral || 0}}</div>
        </div>
        <div class="item" @click="toUrl(3)">
          <span class="itemName">任务</span>
          <div class="itemNum">{{state.userInfo.pushTashNum || 0}}</div>
        </div>
      </div>
      <div class="btnArr">
        <el-button style=" width: 88px;" type="primary" size="small" @click="toUrl(4)"> 提现 </el-button>
        <el-button style=" width: 88px;" size="small" @click="toUrl(5)"> 兑换 </el-button>
      </div>
    </div>

    <div class="type2" v-if="type == 2">
      <div class="itemArr">
        <div class="item">
          <i></i>
          <span class="itemName">发布任务</span>
          <div class="itemNum">{{state.userInfo.pushTashNum || 0}}</div>
        </div>
        <div class="item">
          <i></i>
          <span class="itemName">发布公告</span>
          <div class="itemNum">{{state.userInfo.pushNoticeNum || 0}}</div>
        </div>
        <div class="item">
          <i></i>
          <span class="itemName">收到求助</span>
          <div class="itemNum">{{state.userInfo.helpNum || 0}}</div>
        </div>
      </div>
      <div class="btnArr" style="width:100%;">
        <span @click="router.push('task-releaseTask')">发布任务</span>
        <span @click="router.push('task-announce')">发布公告</span>
        <span @click="checkHelp">查看求助</span>
      </div>
    </div>


  </div>
  </div>
</template>

<script>
  import { getCurrentInstance, ref, reactive, onMounted, onUpdated, onUnmounted, unref } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  const state = reactive({
    isHelp: false,
    isLogin : false,
    userInfo: {},
    urlList: ['baseRecord'],
    path: 'knowledge-basic-list'
  });
  export default {
    name: 'userLogin',
    components: {},
    props: {
      type: {
        type: String,
          default: '1'
      }
    },
    data () {
      return {
        dataForm: {
          username: '',
          password: ''
        }
      }
    },
    computed: {
      dataRule () {
        return {
          username: [
            { required: true, message: '请填写用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' }
          ]
        }
      }
    },
    setup(props,{emit}){
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      let token = localStorage.getItem('token');
      if(token){
        state.isLogin = true
      }
      const dataFormRef = ref();
      // 表单提交
      const dataFormSubmitHandle = async () => {
        const form = unref(dataFormRef)
        if (!form) {
          return
        }
        try {
          await form.validate()
          //调用api 请求登录
          ajaxLogin()

        } catch (err) {
          console.log(err)
        }
      }
      const ajaxLogin = () => {
        _this
          .$request({
            url: "/?s=Learn.Admin.Login",
            params: dataFormRef.value.model,
          })
          .then((res) => {
            if(res.data.code == 1){
              localStorage.setItem("allrules",res.data.token.allrules)
              localStorage.setItem("rules",res.data.token.rules)
              localStorage.setItem("token", res.data.token.token);
              localStorage.setItem("user", JSON.stringify(res.data.token))
              state.userInfo = res.data.token
              ElMessage.success({
                message: '登录成功',
                type: 'success'
              })
              //获取菜单栏
              menuList()
              setTimeout(function () {
                location.reload()
              },1500)
            }else{
              ElMessage.error(res.data.msg);
            }
          });
      }
      function checkHelp(){
        state.isHelp = true
        emit('gocheckhelp',state.isHelp)
      }
      const getUserinfo = () => {
          _this
            .$request({
              url: "/?s=Learn.Admin.GetAdminRow",
              params: {},
            })
            .then((res) => {
              if (res.ret == 200) {
                  state.userInfo = res.data
              }
            })
      }
      const toUrl = (type) => {
        if(type > 3){
          ElMessage.success({
            message: '该模块暂未开放',
            type: 'success'
          })
        }else {
          window.location.href = 'http://intr.huanxingbi.cn/baseRecord?type=' + type
        }
      }
      //获取菜单栏
      const menuList = () => {
        _this
          .$request({
            url: "/?s=Learn.Admin.AdminRoles",
            params: dataFormRef.value.model,
          })
          .then((res) => {
            localStorage.setItem("menuList", JSON.stringify(res.data.admin_roles));
          })
      }
      onMounted(getUserinfo)
      return{
        state,
        getUserinfo,
        router,
        dataFormSubmitHandle,
        dataFormRef,
        ajaxLogin,
        checkHelp,
        toUrl,
        menuList,
      }
    },
  }
</script>

<style lang="scss" scoped>
  .noEdit {
    /deep/ input {
      border: 0;
      padding: 0;
      font-size: 26px;
      text-align: center;
      padding-bottom: 10px;
    }
  }
  .ma-bo50 {
    margin-bottom: 20px;
  }
  .d-fix {
    display: flex;
    justify-content: space-between;
    width: 66%;
    margin-top: 23px;
  }
  .bg {
    background: white;
  }
  .rightTop {
    background-color: #fff;
    flex: 2;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
  .title {
    border-bottom: 1px solid #E9E9E9;
    padding-left: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    height: 55px;
  }

  .panel {
    flex: 1;
  .loginPanel{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
  .inputArr{
    margin: 80px 0 ;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  }

  .loginSucPanel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  .img {
    margin-bottom: 35px;
    width: 106px;
    height: 106px;
    border-radius: 50%;
  img{
    width: 100%;
    height: 100%;
  }
  }
  .name {
    margin-bottom: 35px;
    color: #000000D9;
    font-size: 20px;
    font-weight: 600;
  }


  .btnArr{
    margin-top: 34px;
    display: flex;
    width: 95%;
    justify-content: center;
  span {
  &:nth-child(2) {
     background: #fff;
     color: #000000A6;
   }
  width: 88px;
  height: 32px;
  background: #1890FFFF;
  font-size: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  margin-right: 8px;
  cursor: pointer;
  }
  }
  }

  }
  }
  .loginSucPanel{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 25px;
    height: 100%;
    .img {
      width: 106px;
      height: 106px;
      border-radius: 50%;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .name {
      margin-bottom: 35px;
      color: #000000D9;
      font-size: 20px;
      font-weight: 600;
    }

    .btnArr{
      margin-top: 34px;
      display: flex;
      width: 95%;
      justify-content: center;
      span {
        &:nth-child(2) {
          background: #fff;
          color: #000000A6;
        }
        width: 88px;
        height: 32px;
        background: #1890FFFF;
        font-size: 14px;
        display: grid;
        place-items: center;
        color: #fff;
        margin-right: 8px;
        cursor: pointer;
      }
    }
  }
  .btnArr{
    margin-top: 34px;
    display: flex;
    width: 95%;
    justify-content: space-evenly;
    span {
      &:nth-child(2) {
        background: #FACC14FF !important;
        color: white!important;
      }
      &:nth-child(3) {
        background: #2FC25BFF;
      }
      background: #1890FFFF;
      font-size: 14px;
      color: #fff;
      padding: 6px 16px;
      cursor: pointer;
    }
  }
  .type1 {
    width: 85%;
    .itemArr {
      display: flex;
      .item:active {
        background: #ebedef;
      }
      .item {
        &:nth-child(3) {
          border: 0;
        }
        cursor:pointer;
        flex: 1;
        align-items: center;
        display: flex;
        flex-direction: column;
        border-right: 1px solid #E9E9E9FF;

        &:nth-child(2) .itemName:before {
          background-color: #FACC14FF;
        }

        &:nth-child(3) .itemName:before {
          background-color: #2FC25BFF;
        }

        .itemName {
          color: #00000073;
          font-size: 14px;
          position: relative;

          &:before {
            content: '';
            position: absolute;
            top: 5px;
            left: -35%;
            display: block;
            background-color: #1890FFFF;
            width: 6px;
            height: 6px;
            border-radius: 50%;
          }
        }

        .itemNum {
          margin-top: 9px;
          color: #000000D9;
          font-size: 24px;
        }
      }
    }
  }
  .type2 {
    width: 100%;
    .itemArr {
      display: flex;


      .item {
        &:nth-child(3) {
          border: 0;
        }

        flex: 1;
        align-items: center;
        display: flex;
        flex-direction: column;
        border-right: 1px solid #E9E9E9FF;

        &:nth-child(2) .itemName:before {
          background-color: #FACC14FF;
        }

        &:nth-child(3) .itemName:before {
          background-color: #2FC25BFF;
        }

        .itemName {
          color: #00000073;
          font-size: 14px;
          position: relative;

          &:before {
            content: '';
            position: absolute;
            top: 5px;
            left: -35%;
            display: block;
            background-color: #1890FFFF;
            width: 6px;
            height: 6px;
            border-radius: 50%;
          }
        }

        .itemNum {
          margin-top: 9px;
          color: #000000D9;
          font-size: 24px;
        }
      }
    }
  }
</style>
